<template>
	<div style="text-align: center;">
		<div>
			<div>关键词：<input v-model="keyWord" type="text"/><button style="margin-left: 5px;" @click="getHotEvents(1)" >查询</button></div>
			<div><h1>热点事件排行榜</h1></div>
			<div>
				<table border="1px" cellpadding="1px" cellspacing="1px" style="margin: 0px auto;text-align: center;margin-bottom: 20px;">
					<tr style="color: #000000;background-color: #d293dd;">
						<td style="width: 400px;">关键词</td>
						<td style="width: 150px;">搜索指数</td>
						<td style="width: 150px;">创建时间</td>
					</tr>
					<tr v-for="item in HotEvents">
						<td><a href="javascript:void(0);" @click="jump(item.id)">{{item.keyWord}}</a></td>
						<td>{{item.searchSum}}</td>
						<td>{{item.createDate}}</td>
					</tr>
				</table>
				<div class="page">
					<a href="javascript:void(0);" @click="getHotEvents(1)">首页</a>
					<a href="javascript:void(0);" @click="getHotEvents(pageNum-1)">上一页</a>
					<a href="javascript:void(0);" @click="getHotEvents(pageNum+1)">下一页</a>
					<a href="javascript:void(0);" @click="getHotEvents(pages)">尾页</a>
					<span>第{{pageNum}}页/共{{pages}}页</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	 export default{
		data(){
			return{
				keyWord:"",
				pages:"",
				pageNum:"",
				HotEvents:[],
			}
		},
		beforeMount() {
			var that=this;
			var url="http://localhost:8081/getHotEvents";
			axios.get(url,{
				params:{
					currentNo:1,
					keyWord:that.keyWord
				}
			}).then(res=>{
				if(res.data.message=="OK"){
					that.pages=res.data.data.pages;
					that.pageNum=res.data.data.pageNum;
					that.HotEvents=res.data.data.list;
				}
			})
		},
		methods:{
			jump:function(id){
				this.$router.push({path:'/detail',query:{id:id}})
			},
			getHotEvents:function(current){
				if(current>this.pages){current=1;}
				if(current<1){current=this.pages;}
				var that=this;
				var url="http://localhost:8081/getHotEvents";
				axios.get(url,{
					params:{
						currentNo:current,
						keyWord:that.keyWord
					}
				}).then(res=>{
					if(res.data.message=="OK"){
						that.pages=res.data.data.pages;
						that.pageNum=res.data.data.pageNum;
						that.HotEvents=res.data.data.list;
					}
				})
			}
		}
	}
</script>

<style>
	.page a{
		margin: 5px;
	}
</style>
